<template>

	<view class="redBox">
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 现金红包
			</view>
			<!-- 	<view class="action" @click="clickRule">
				查看规则<text class="cuIcon-right text-orange "></text>
			</view> -->
		</view>
		<!--列表样式1开始-->
		<!-- 	<view class="red-box flex-wrap justify-start">
			<view class="red-item padding animation-fade" v-for="(item,index) in cuIconList" :key="index" :style="[{animationDelay: (index)*0.1 + 's'}]"
			 @click="recive(index)">
				<view class="item-box-box" :class="statusArr[item.status]">
					{{item.name}}
				</view>
				<text class="lg text-gray cuIcon-right jiantou" v-if="index<cuIconList.length-1"></text>
			</view>
		</view> -->
		<!--列表样式1结束-->

		<!--列表样式2开始-->
		<scroll-view scroll-y="true" class="red-box1">
			<view class="red-box1-item" v-for="(item,index) in cuIconList" :key="index"
				:style="[{animationDelay: (index)*0.1 + 's'}]" @click="recive(index)">

				<image src="../../static/tabbar/redpack.png" mode="heightFix" class="red-img"></image>
				<view class="red-box1-item-title">
					<!-- 	{{item.name}} -->
					<view style="color: red;" class="red-box1-item-title1">现金{{item.name}}元</view>
					<view class="red-box1-item-title2">邀请好友报名{{item.condition}}门课程可领取</view </view>
					

						
					</view>
					<button class="cu-btn round sm  lingquBut" :class="statusArr[item.status]">立即领取</button>


				</view>
		</scroll-view>
		<!--列表样式2结束-->

	</view>
</template>

<script>
	export default {
		props: ['hongBao', 'rule'],
		data() {
			return {
				gridCol: 4,
				statusArr: [
					"bg-grey", "bg-red", "bg-success"
				],
				redIndex: -1,

				cuIconList: [],

			}

		},
		mounted() { //准备开始
			this.paiSort();
		},
		methods: {
			/**
			 * 改变数据
			 */
			xx(dat) {
			
				
				
				for (let i in dat) {
					for (let k in this.cuIconList) {
						(this.cuIconList[k].amount == dat[i].amount) ? (this.cuIconList[k].status = dat[i].status) : "";
					}

				}
			},

			/**
			 * 对数据进行排序
			 */
			paiSort() {
				console.log(this.hongBao);
				for (let i in this.hongBao) {
					this.hongBao[i].name = "￥" + this.hongBao[i].amount;
					this.cuIconList.push(this.hongBao[i]);

				}
			},
			/**
			 * 领取红包
			 * @param {Object} index
			 */
			recive(index) { //领取红包
				console.log("领取红包" + this.cuIconList[index].status + " index " + index);
				let status = this.cuIconList[index].status;
				let show = () => {
						uni.showModal({
							title: "提示",
							content: "提取现金后，邀请数据清零!",
							success: (res) => {
								if (res.confirm) {
									(status == 0 || status == 1) ? this.unReceive(this.cuIconList[index],
										index): "";
								}
							}
						})
					}
					(status == 1) ? show() : (status == 0) ? this.unReceive(this.cuIconList[index], index) : "";

			},
			/**
			 * 不能领取红包的提示
			 */
			unReceive(dat, index) {
				console.log(this.hongBao);
				this.redIndex = index;
				this.$emit('CredPack', dat);


			},
			/**
			 * 改变红包状态
			 */
			changeRedPack() {
				let chang = () => {
						this.hongBao[this.redIndex].status = 2;

					}
					((this.hongBao[this.redIndex].status == 1) ? chang() : false);

				console.log("zhuabgtai  " + this.hongBao[this.redIndex].status);
			},




			/**
			 * 点击查看红包规则
			 */
			clickRule() {
				uni.navigateTo({
					url: "/pages/popup/panel?type=0&data=" + this.rule,
					animationType: 'pop-in'

				});



			}




		}


	}
</script>

<style scoped>
	/**
	 * 红包列表样式1开始
	 */
	.red-box1 {

		max-height: 360rpx;

	}

	.red-box1-item {
		margin-top: 1vh;
		background-color: #E8E8E8;
		border-radius: 10rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;

	}

	.red-img {
		height: 80rpx;
	}

	.red-box1-item-title {
		height: 80rpx;
		display: flex;
		margin-left: 1vw;
		display: flex;
		flex-direction: column;


	}

	.red-box1-item-title2 {
		display: flex;
		align-items: flex-end;
	}

	.red-box1-item-title1 {
		font-size: 3.5vw;
	}


	.lingquBut {
		position: absolute;
		float: right;
		right: 2vw;
	}








	/**
	 * 红包列表样式1结束
	 */







	.redBox {
		width: 100%;


	}

	.pariceBox {
		position: relative;
	}

	.priceNum {
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: center;
		z-index: 1;
		display: flex;
		justify-content: center;
		margin-top: 25%;
		color: white;
	}

	.redImg {
		width: 70%;
	}

	.red-box {
		width: 100%;
		display: flex;
	}

	.red-item {
		width: 25%;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.item-title {
		width: 100%;
		text-align: center;
	}

	.item-box-box {
		width: 80%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90%;
		border-radius: 5upx;
	}

	.bg-success {
		opacity: 0.6;
		background-color: #f7f7f7;
		border: 1px solid gray;
		color: rgba(0, 0, 0, .7);
	}

	.jiantou {
		position: absolute;
		float: right;
		right: 0;
	}
</style>
